<!DOCTYPE html>
{% extends 'base.html' %}
{% load static %}

{% block title %}
    -仪器页面
{% endblock %}

{#{% block css %}#}
{#    {% static 'css/index.css' %}#}
{##}
{#{% endblock %}#}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
{% endblock %}
{% block insindexHighlight %}
    active
{% endblock %}
{% block main_block %}
    {% if messages %}
        <script>
            {% for msg in messages %}
                alert('{{ msg.message }}');
            {% endfor %}
        </script>
    {% endif %}
    <div style="float: right;width: 300px;margin-bottom: 10px">
        <form method="get">
            <div class="input-group">
                <input type="text" name="ins_name" style="margin-right: 10px" class="form-control"
                       placeholder="搜索仪器名"
                       value="{{ search_data }}">
                <span class="input-group-btn">
                        <button class="btn btn-primary" type="submit">搜索</button>
                    </span>
            </div>
        </form>
    </div>
    <div id="table-responsive">
        <table class="table table-hover">
            <thead class="thead-light">
            <tr>
                <th scope="col">序号</th>
                <th scope="col">仪器编号</th>
                <th scope="col">仪器名</th>
                <th scope="col">仪器剩余数量</th>
                <th scope="col">状态|操作</th>
            </tr>
            </thead>
            <tbody class="no_underline">
            {% for ins in instrumentList %}
                {% if ins.ins_nowtotal == 0 %}
                    <tr class="table">
                        <th class="text-dark" scope="row">{{ forloop.counter }}</th>
                        <td class="text-dark" id="line_through">{{ ins.ins_no }}</td>
                        <td class="text-dark" id="line_through">{{ ins.ins_name }}</td>
                        <td class="text-dark" id="line_through">{{ ins.ins_nowtotal }}</td>
                        <td>
                            <button type="button" class="btn btn-warning btn-sm">暂时短缺</button>
                            <button type="button" class="btn btn-info btn-sm">无法借用
                            </button>
                        </td>
                    </tr>
                {% elif ins.ins_nowtotal <= 25 %}
                    <tr class="table">
                        <th class="text-dark" scope="row">{{ forloop.counter }}</th>
                        <td class="text-dark">{{ ins.ins_no }}</td>
                        <td class="text-dark">{{ ins.ins_name }}</td>
                        <td class="text-dark">{{ ins.ins_nowtotal }}</td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm">库存紧张</button>
                            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                    data-target="#myModal{{ ins.id }}" id="addStudent">点击借用
                            </button>

                            <!-- Modal -->
                            <div class="modal fade" id="myModal{{ ins.id }}" tabindex="-1" role="dialog"
                                 aria-labelledby="myModal{{ ins.id }}Label"
                                 aria-hidden="true">
                                <div class="modal-dialog" role="document" id="stuadd_modal">
                                    <div class="modal-content">

                                        <div class="modal-header">
                                            <h5 class="modal-title" id="myModal{{ ins.id }}Label">
                                                请确认借用</h5>
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>

                                        <div class="modal-body">
                                            确认要借用该仪器<strong>{{ ins.ins_name }}</strong>吗？

                                            <br>
                                            <form action="{% url 'Lab:ins_subAndBo' ins.id %}" method="post">

                                                {% csrf_token %}

                                                <div class="form-group">
                                                    <label for="id_insUsedNum"
                                                           class="col-sm-4 control-label">数量：</label>
                                                    <div class="col-sm-8">

                                                        <input type="text" class="form-control"
                                                               name="insUsedNum"
                                                               id="id_insUsedNum" required
                                                               oninput="value=value.replace(/[^\d]/g,'')"
                                                               placeholder="借用仪器数量">
                                                    </div>
                                                </div>

                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-primary">确认</button>
                                                    <button type="button" class="btn btn-secondary"
                                                            data-dismiss="modal">取消
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>

                    </tr>
                {% else %}
                    <tr class="table">
                        <th class="text" scope="row">{{ forloop.counter }}</th>
                        <td class="text">{{ ins.ins_no }}</td>
                        <td class="text">{{ ins.ins_name }}</td>
                        <td class="text">{{ ins.ins_nowtotal }} </td>
                        <td>
                            <button type="button" class="btn btn-success btn-sm">库存充足
                            </button>

                            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                    data-target="#myModal{{ ins.id }}" id="addStudent">点击借用
                            </button>

                            <!-- Modal -->
                            <div class="modal fade" id="myModal{{ ins.id }}" tabindex="-1" role="dialog"
                                 aria-labelledby="myModal{{ ins.id }}Label"
                                 aria-hidden="true">
                                <div class="modal-dialog" role="document" id="stuadd_modal">
                                    <div class="modal-content">

                                        <div class="modal-header">
                                            <h5 class="modal-title" id="myModal{{ ins.id }}Label">
                                                请确认借用</h5>
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>

                                        <div class="modal-body">
                                            确认要借用该仪器<strong>{{ ins.ins_name }}</strong>吗？

                                            <br>
                                            <form action="{% url 'Lab:ins_subAndBo' ins.id %}" method="post">

                                                {% csrf_token %}

                                                <div class="form-group">
                                                    <label for="id_insUsedNum"
                                                           class="col-sm-4 control-label">数量：</label>
                                                    <div class="col-sm-8">

                                                        <input type="text" class="form-control"
                                                               name="insUsedNum"
                                                               id="id_insUsedNum" required
                                                               oninput="value=value.replace(/[^\d]/g,'')"
                                                               placeholder="借用仪器数量">
                                                    </div>
                                                </div>


                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-primary">确认</button>
                                                    <button type="button" class="btn btn-secondary"
                                                            data-dismiss="modal">取消
                                                    </button>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>

                {% endif %}
            {% endfor %}
            </tbody>
        </table>
        <ul class="pagination">
            {{ page_string }}
        </ul>
    </div>


{% endblock %}